//第一份农业
<template>
    <el-container style="background-image: url('public/01fe545d2536c1a80120b5ab62c10f.jpg@1280w_1l_2o_100sh.jpg');">
        <el-header class="data-container">
            <h2>数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 150px;">
                        <h3>温度一</h3>
                        <p>{{ Tstate1 }}℃</p>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 205px; height: 150px;">
                        <h3>光照强度: {{ LSstate }}</h3>
                        <h3>光照阈值:{{ LSmax }}</h3>
                        <!-- <h3>光照阈值:{{ LSmin }}</h3> -->
                    </el-card>
                </el-col>

                <!-- <el-col :span="4">
                    <el-card class="hover-effect" @mouseenter="cardHoverIn" @mouseleave="cardHoverOut"
                        style="width: 200px; height: 150px;">
                        <h3>烟雾浓度</h3>
                        <p>{{ state }}</p>
                    </el-card>
                </el-col> -->

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 150px;">
                        <h3>湿度</h3>
                        <p>{{ Hstate }}%</p>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 150px;">
                        <h3>温度阈值1: {{ Tmax }}</h3>
                        <h3>温度阈值2: {{ Tmin }}</h3>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 150px;">
                        <h3>电机状态: {{ emachinestate }}</h3>
                    </el-card>
                </el-col>

            </el-row>


            <br>
            <el-row>
                

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>电机状态设置</h3>
                        <el-button type="primary" @click="emachine1">正转</el-button>
                        <br>
                        <el-button type="primary" @click="emachine2">反转</el-button>
                        <br>
                        <el-button type="primary" @click="emachineclose">关闭</el-button>
                        <br>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>设置光照阈值</h3>
                        <el-input v-model="inputLSmax" placeholder="光照最阈值" style="width: 90px; "></el-input>
                        <el-button type="primary" @click="setLSmax">确定</el-button>
                        <!-- <el-input v-model="inputLSmin" placeholder="光照最阈值" style="width: 90px;"></el-input>
              <el-button type="primary" @click="setLSmin">确定</el-button> -->
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>设置温度阈值</h3>
                        <el-input v-model="inputTmax" placeholder="温度阈值1" style="width: 90px;"></el-input>
                        <el-button type="primary" @click="setTmax">确定</el-button>
                        <el-input v-model="inputTmin" placeholder="温度阈值2" style="width: 90px;"></el-input>
                        <el-button type="primary" @click="setTmin">确定</el-button>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>风扇1开关</h3>
                        <el-switch @change="fanopen1" v-model="fan1" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>

                        <h3>风扇2开关</h3>
                        <el-switch @change="fanopen2" v-model="fan2" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-card>
                </el-col>

                <!-- <el-col :span="4">
            <el-card class="hover-effect" @mouseenter="cardHoverIn" @mouseleave="cardHoverOut"
              style="width: 200px; height: 200px;">
              <h3>风扇1功率:{{ fan1Gl }}</h3>
              <el-input v-model="inputfanpower1" placeholder="设置风扇1功率" style="width: 90px;"></el-input>
              <el-button type="primary" @click="setfanpower1">确定</el-button>
              <h3>风扇2功率:{{ fan1Gl }}</h3>
              <el-input v-model="inputfanpower2" placeholder="设置风扇2功率" style="width: 90px;"></el-input>
              <el-button type="primary" @click="setfanpower2">确定</el-button>
            </el-card>
          </el-col> -->

                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>可调灯开关</h3>
                        <el-switch @change="lampopen" v-model="lamp" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-card>
                </el-col>


                <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                        <h3>自动模式</h3>
                        <el-switch @change="autoopen" v-model="auto" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-card>
                </el-col>

            </el-row>
            <br>
            <el-row>

                


                <!-- <el-col :span="4">
                    <el-card class="hover-effect" style="width: 200px; height: 300px;">
                    <router-link to="/history">查看历史数据</router-link>
                    <router-view></router-view>
                    </el-card>
                </el-col> -->

                <!-- <el-col :span="4">
                    <el-card class="hover-effect" @mouseenter="cardHoverIn" @mouseleave="cardHoverOut"
                        style="width: 200px; height: 300px;">
                        <h3>警报灯</h3>
                        <el-switch @click="Jbd" v-model="jbd" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-card>
                </el-col> -->

            </el-row>
            <br>



            <br>
            <el-row>
            </el-row>



        </el-main>
    </el-container>


</template>



<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    // el: '#control',
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            emachinestate: "关",// 电机状态
            lampstate: "关", // 可调灯状态
            autostate: false, //自动模式状态
            inputLSmax: "",//设置光度阈值
            inputTmin: "",//设置温度阈值2
            inputTmax: "",//设置温度阈值1
            Tstate1: 0, //温度显示
            Tstate2: 0,
            Hstate: "", //湿度显示
            LSstate: "", // 光照强度显示
            Tmax: "",//温度阈值
            Tmin: "",//温度阈值
            LSmax: "",//光最大值
            fan1:false,
            fan2:false,
            lamp:false,
            auto:false,
            // LSmin:"",//光最大值
        }
    },
    computed: {//可以用来实时显示卡的数量
        //   alarmstate:function(){
        //   return Meg;
        // }
    },
    watch: {//监听错误次数变化


    },
    created() {
        // this.test()


        this.initWecSocket();

    },
    methods: {
        autoopen: function () { //打开自动模式
            if(this.auto == true){
                axios.get("http://localhost:8888/sendMessageTo/HWauto1Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWauto0Z");
            }
        },
        emachineclose: function () { //电机关闭
            this.emachinestate = "关";
            axios.get("http://localhost:8888/sendMessageTo/HWdian0Z");

        },
        emachine2: function () { //电机反转
            this.emachinestate = "反转";
            axios.get("http://localhost:8888/sendMessageTo/HWdian2Z");
           
        },
        emachine1: function () { //电机正转
            this.emachinestate = "正转";
            axios.get("http://localhost:8888/sendMessageTo/HWdian1Z");

        },
        lampopen: function () { //关闭可调灯
            if(this.lamp == true){
                axios.get("http://localhost:8888/sendMessageTo/HWled1100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWled1000Z");
            }

        },

        fanopen2: function () { // 打开风扇2
            if(this.fan2 == true){
                axios.get("http://localhost:8888/sendMessageTo/HWfan2100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan2000Z");
            }

        },
        fanopen1: function () { // 打开风扇1
            if(this.fan1 == true){
                axios.get("http://localhost:8888/sendMessageTo/HWfan1100Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWfan1000Z");
            }
        },
        setLSmax: function () { //设置光照阈值
            this.LSmax = this.inputLSmax;
            sendMeg = "HWLight" + this.LSmax + "Z"
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg)
        },
        setTmin: function () { //设置温度阈值2
            this.Tmin = this.inputTmin;
            sendMeg = "HWLmax" + this.Tmin + "Z"
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg)
        },
        setTmax: function () { //设置温度阈值1
            this.Tmax = this.inputTmax;
            sendMeg = "HWTmax" + this.Tmax + "Z"
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg)
        },
        reconnect: function () {
            sendMeg = "HWLmax" + this.Tmax + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            sendMeg = "HWTmax" + this.Tmin + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            this.currentTime = new Date().toLocaleTimeString();
            sendMeg = "HWtime" + this.LSmax + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // if (this.switch4 == false) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled10Z");
            // } else if (this.switch4 == true) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled11Z");
            // }
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 1) == "t") {
                this.Tstate1 = event.data.substring(1,);
            }
            if (event.data.substring(0, 2) == "Hd") {
                this.Hstate = event.data.substring(2,);
            }
            if (event.data.substring(0, 2) == "ls") {
                this.LSstate = event.data.substring(2,);
            }
            if(event.data == "HWled1000Z"){
                this.lamp = false
            }
            if(event.data == "HWled1100Z"){
                this.lamp = true
            }
            if(event.data == "HWfan1100Z"){
                this.fan1 = true
            }
            if(event.data == "HWfan1000Z"){
                this.fan1 = false
            }
            if(event.data == "HWfan2100Z"){
                this.fan2 = true
            }
            if(event.data == "HWfan2000Z"){
                this.fan2 = false
            }
            if(event.data == "HWauto0Z"){
                this.auto = false
            }
            if(event.data == "HWauto1Z"){
                this.auto = true
            }
            if(event.data == "HWdian1Z"){
                this.emachinestate = "正转"
            }
            if(event.data == "HWdian2Z"){
                this.emachinestate = "反转"
            }
            if(event.data == "HWdian0Z"){
                this.emachinestate = "关闭"
            }
            if(event.data.substring(0,4) == "Tmax"){
                this.Tmax = event.data.substring(4,event.data.length - 1)
            }
            if(event.data.substring(0,4) == "Lmax"){
                this.Tmin = event.data.substring(4,event.data.length - 1)
            }
            if(event.data.substring(0,5) == "Light"){
                this.LSmax = event.data.substring(5,event.data.length - 1)
            }
            if (event.data == "Reconnect") {
                this.reconnect();
            }
            

        },

    }

}
</script>